<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片处理</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
    // 判断当前页面是否是lsb.html页面，并设置对应导航链接的活动状态
    $(function() {
        var currentPage = window.location.pathname;  // 当前页面的路径
        if (currentPage === '/lsb.html') {
            $('#algorithm-link').addClass('active');
        }
    });
    </script>
    <script>
        // 使用 jQuery 加载导航栏
        $(function() {
            $("#navigation").load("navigation.html");
        });
    </script>
</head>
<body>

<!-- 导入复用导航栏 -->
    <div id="navigation"></div>
<div class="container">
<!--TODO: 图片上传的UI优化                      -->
<!--TODO: 选择隐写位数的UI优化                  -->
<!--TODO: 展示隐写前后数据的对比情况-->
<!--TODO: 隐写结果展示页面优化。(直接在原页面展示隐写后的图片并提供下载按钮)-->
<!--TODO: 利用AJAX异步传输技术替换submit表单技术上传数据-->
    <h3>上传本地图片并处理</h3>
    <div class="row">
        <div class="col-md-6">
            <h4> LSB隐写分析 </h4>
            <form action="analysis.html" method='POST' enctype="multipart/form-data" >
                <div style="width: 300px; height: 100px; border: 1.5px dashed gray;">
                    <input type="file" style="display:inline; width:100%; height:100%;" name="file1"/>
                </div>
                <br>
                <input type="submit" value="隐写分析" class="button-new" />
            </form>
            <br>
            <p>{{rs0}}<p>
            <p>{{rs1}}</p>
            <h3>{{message}}</h3>
            <h3>{{p}}</h3>
        </div>
    </div>
</div>
</body>
</html>
